<template>
    <div>
<!-- 1楼导航栏  标题 -->
<div class="nav-header">
      	<div class="center">
      		<div>
      			<img src="../assets/image/logo.png" alt="" class="active1">
      		</div>
      		<div class="nav-item">
      			<a href="02_second.html" class="active">关于中科东方</a>					<ul class="ul-1">
      				<a href="02_second.html"><li>公司介绍</li></a>
      				<a href="expert-main.html"><li>专家介绍</li></a>
      				<a href="02.html"></a><li>产业规划</li>
      				<a href=""><li>企业文化</li></a>
      				<a href="honour-main .html"><li>荣誉资质</li></a>
      				<a href="contact-main .html"><li>联系方式</li></a>
      				<a href="join-main.html"><li>加入我们</li></a>
      			</ul>
      		</div>
      		<div class="nav-item">
      			<a href="03_third.html">生命银行</a>
      				<ul class="ul-2">
      					<li><a href="03_third.html">围产期干细胞</a></li>
      					<li><a href="04_immunity.html">免疫细胞</a></li>
      					<li><a href="05_adult.html">成体干细胞</a></li>
      					<li><a href="06_fibre.html">成纤维细胞</a></li>
      				</ul>
      		</div>
      		<div class="nav-item">
      			<a href="javascript:;">应用转化</a>
      			<ul class="ul-3">
      				<li><a href="">科研服务</a></li>
      				<li><a href="">科研试剂</a></li>
      				<li><a href="">生物美容</a></li>
      				<li><a href="">健康管理</a></li>
      				<li><a href="">仪器开发</a></li>
      			</ul>
      		</div>
      		<div class="nav-item">
      			<a href="new drug.html">新药研发</a>
      		</div>
      		<div class="nav-item">
      			<a href="xw.html">新闻中心</a>
      				<ul class="ul-4">
      					<a href="xw.html"><li>公司动态</li></a>
      					<a href="xw1.html"><li>行业政策</li></a>
      					<a href="xw2.html"><li>行业前沿</li></a>
      					<a href="xw3.html"><li>社会责任</li></a>
      				</ul>
      		</div>
      		<div class="nav-item">
      			<a href="03.html">客户服务</a>
      			<ul class="ul-5">
      				<a href="03.html"><li>年检报告</li></a>
      				<a href="03.html"><li>订单查询</li></a>
      				<a href="kehu.html"><li>在线咨询</li></a>
      			</ul>
      		</div>
      		<div class="navbar">
      			<ul>
      				<li>
      				  <a href=""
      				    ><input type="text" placeholder="请输入搜索内容" />
      				    <img src="../assets/image/search.png" alt=""
      				  /></a>
      				</li>
      				<li>
      				  <a href=""
      				    ><button>登录</button> <img src="../assets/image/i-user.png" alt=""
      				  /></a>
      				</li>
      				<li>
      				  <a href="">
      				    <button>企业邮箱</button>
      				    <img src="../assets/image/i-email.png" alt=""
      				  /></a>
      				</li>
      			</ul>
      		</div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
	/*********公共样式**********/
    * {
				margin: 0;
				padding: 0;
			}
			.center {
				width: 1600px; 
				margin: 0 auto;
			}
			ul {
				list-style: none;
			}
			.clearfix::after {
				content: '';
				display: block;
				clear: both;
			}
			a {
				text-decoration: none;
			}
			/* 导航栏 */
			.nav-header{
				height: 130px;
				background-color: #fff;
			}
			.nav-header .center .nav-item{
				float: left;
				height: 130px;
				width: 120px;
				position: relative;
				left: 100px;
				z-index: 100;
				font-size: 15px;
			}
		  .nav-header .center .active1{
				float: left;
				/* height: 130px; */
				width: 150px;
				position: relative;
				left: 100px;
				z-index: 100;
				margin-left: -50px;
				margin-right: 25px;
				padding-top: 25px;
				box-sizing: border-box;
				z-index: 200;
			} 
			
			.nav-header .center .nav-item img{
				display: block;
				margin: 25px auto;
				margin-right: 50px;
				
			}
			.nav-header .center .nav-item a{
				display: block;
				color: #000;
				text-align: center;
				line-height: 130px;
			}
		.nav-header .center .nav-item	a:hover::after{
				content: '';
				display: block;
				width: 64px;
				height: 3px;
				position: absolute;
				left: 50%;/* 不懂 */
				bottom: 0;
				z-index: 10;
				background-image: linear-gradient(90deg,#258bc9 0% ,#56bced 100%),linear-gradient(#109cda,#109cda);
				background-blend-mode: normal,normal; /*不懂 */
				margin-left:-32px ;
				
			}
			.nav-header .center .nav-item a:hover
			/* ,.nav-header .center .nav-item>.active */
			{
				color:#4FB5E8;
				font-weight: bold;
			}
			 .nav-header .center .nav-item ul:hover{
				display: block;
				width: 100vw;
			}
			/* 下拉菜单 CSS*/
			.navbar ul{
			    display: flex;
			    justify-content: space-evenly;
			}
			.navbar ul li{
			    height: 128px;
			    line-height: 128px;
			    font-size: 14px;
			    color: #000;
			    padding-left: 52px;
			}
			.navbar ul a li:hover{
			    color: #258bc9;
			}
			
			.nav-header .center .nav-item ul{
				background-color: rgba(255,255,255,0.9);
				display: none; 
				position: fixed;
				top:130px;
				width: 100vw;
				left: 0;
			}
			.nav-header .center .nav-item .ul-1{
				padding-left: 210px;
			}
			.nav-header .center .nav-item .ul-2{
				padding-left: 340px;
			}
			.nav-header .center .nav-item .ul-3{
				padding-left: 455px;
			}
			.nav-header .center .nav-item .ul-4{
				padding-left: 690px;
			}
			.nav-header .center .nav-item .ul-5{
				padding-left: 810px;
			}
			.nav-header .center .nav-item ul li{
				float: left;
				height: 100px;
				width: 150px;
				text-align: center;
				line-height: 100px;
			}
			.nav-header .center .nav-item:hover ul {
				display: block;
				width: 100vw;
			}
		/*   输入框 按钮  */
		.navbar ul li:nth-child(1) button:active{
		     border: 1px solid #258bc9;
		}
		.navbar ul li:nth-child(1){
		    margin-left:15px;
		}
		.navbar ul li:nth-child(1) img{
		    width: 16px;
		    height: 18px;
		    position: absolute;
		    right: 450px;
		    top: 55px;
		}
		.navbar ul li:nth-child(1) input{
		    height: 45px;
		    width: 230px;
		    border-radius: 30px;
		    border: 1px solid #e8eaeb;
		    padding-left: 30px;
		    box-sizing: border-box;
		    outline: none;
		}
		.navbar ul li:nth-child(2){
		    padding-left: 13px;
		    box-sizing: border-box;
		}
		.navbar ul li:nth-child(2) button{
		    width: 150px;
		    height: 45px;
		    border-radius: 30px;
		    padding-left:13px;
		    border: solid 1px #e8eaeb;
		    background-color: #fff;
		
		} 
		.navbar ul li:nth-child(2) button:hover{
		    background-color: #258bc9;
		}
		.navbar ul li:nth-child(2) img{
		    width: 22px;
		    height: 22px;
		    position: absolute;
		    right: 340px;
		    top: 53px;
				z-index: 100;
		}
		.navbar ul li:nth-child(3){
		    position: relative;
		    right:35px;
		}
		.navbar ul li:nth-child(3) img{
		    width: 18px;
		    height: 15px;
		    position: absolute;
		    left: 80px;
		    top: 58px;
		}
		.navbar ul li:nth-child(3) button{
		    width: 150px;
		    height: 44px;
		    border-radius: 30px;
		    padding-left:13px;
		    border: solid 1px #e8eaeb;
		    background-color: #fff;
		}
		.navbar ul li:nth-child(3) button:hover{
		    background-color: #f2a440;
		}
</style>